<template>
  <ProTable
    ref="tableRef"
    :fetchListApi="getAppVersionList"
    :columns="columns"
    row-key="id"
    :rowSelection="rowSelection"
  >
    <template #toolbars>
      <Space>
        <b-button icon="add" @click="onAdd()" code="appManage:add"
          >新增</b-button
        >
        <b-button
          icon="delete"
          @click="onDelete()"
          code="appManage:remove"
          :disabled="!selectRows.length"
          >删除</b-button
        >
      </Space>
    </template>

    <template #operation="{ record }">
      <template v-if="record.isAudit != '0'">
        <b-button
          icon="edit"
          type="link"
          code="appManage:edit"
          @click="onUpdate(record)"
        >
          编辑</b-button
        >
        <b-button
          icon="examine"
          type="link"
          code="appManage:audit"
          @click="onAudit(record)"
        >
          审核</b-button
        >
      </template>
      <b-button
        icon="detail"
        type="link"
        v-else
        code="appManage:show"
        @click="onLook(record)"
      >
        查看</b-button
      >
    </template>
  </ProTable>
  <FormModal :items="items"> </FormModal>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import {
  Col,
  FormItemRest,
  Input,
  Modal,
  Row,
  Space,
  Tag,
  message,
} from 'ant-design-vue';
import { ProFormProps } from '@/components/ProForm';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { useFormModal } from '@/hooks/formModal';
import { auditEnum, enableStatusEnum } from '@/constant/push';
import {
  addAppVersion,
  delAppVersion,
  getAppVersionList,
  submitAppAudit,
  updateAppVersion,
} from '@/api/push';

const tableRef = ref();

const selectRows = ref<any[]>([]);
const rowSelection = computed<ProTableProps['rowSelection']>(() => {
  return {
    onChange(values, selectedRows) {
      selectRows.value = selectedRows;
    },
  };
});

const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '软件版本',
    dataIndex: 'version',
  },
  {
    title: '版本说明',
    dataIndex: 'versionDesc',
    hideInSearch: true,
  },

  {
    title: '发布时间',
    dataIndex: 'createTime',
    hideInSearch: true,
  },
  {
    title: '创建人',
    dataIndex: 'createBy',
    hideInSearch: true,
  },
  {
    title: '是否启用',
    dataIndex: 'isEnable',
    valueEnum: enableStatusEnum,
    defaultValue: '0',
    width: 100,
    customRender({ text }) {
      return (
        <Tag color={text == '0' ? 'success' : 'error'}>
          {enableStatusEnum[text as keyof typeof enableStatusEnum]}
        </Tag>
      );
    },
  },
  {
    title: '审核状态',
    dataIndex: 'isAudit',
    hideInSearch: true,
    width: 100,
    valueEnum: auditEnum,
    customRender({ text }) {
      return (
        <Tag color={text == '0' ? 'success' : 'warning'}>
          {auditEnum[text as keyof typeof auditEnum]}
        </Tag>
      );
    },
  },
  {
    title: '审核时间',
    dataIndex: 'auditTime',
    hideInSearch: true,
  },
  {
    title: '审核人',
    dataIndex: 'auditBy',
    hideInSearch: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    width: 200,
  },
]);

const items = computed<ProFormProps['items']>(() => [
  {
    label: '软件版本',
    type: 'input',
    field: 'version',
    rules: [
      {
        required: true,
        message: '请输入软件版本',
        trigger: 'blur',
      },
    ],
    props: {
      placeholder: '请输入软件版本',
    },
  },
  {
    label: '版本说明',
    type: 'textarea',
    field: 'versionDesc',
    rules: [
      {
        required: true,
        message: '请输入版本说明',
        trigger: 'blur',
      },
    ],
    props: {
      placeholder: '请输入版本说明',
    },
  },
  {
    label: '下载地址',
    type: 'input',
    field: 'downloadUrl',
    rules: [
      {
        required: true,
        message: '请输入下载地址',
        trigger: 'blur',
      },
    ],
    props: {
      placeholder: '请输入下载地址',
    },
  },
  {
    label: '是否启用',
    type: 'radio',
    field: 'isEnable',
    rules: [
      {
        required: true,
        message: '请选择是否启用',
        trigger: 'blur',
      },
    ],
    props: {
      options: [
        { label: '启用', value: '0' },
        { label: '停用', value: '1' },
      ],
    },
  },
]);
const { FormModal, open } = useFormModal({
  size: 'small',
  column: 1,
  formProps: { labelCol: { span: 4 } },
});

const onAdd = async () => {
  open({
    title: '新增',
    defaultValue: {},
    serviceApi: async (params: any): Promise<any> => {
      await addAppVersion(params);
      sleep(() => tableRef.value.refresh());
    },
  });
};

const onUpdate = async (record: any) => {
  open({
    title: (type) => (type === 'info' ? '详情' : '编辑'),
    modalType: 'info',
    defaultValue: { ...record },
    serviceApi: async (params: any): Promise<any> => {
      await updateAppVersion(params);
      sleep(() => tableRef.value.refresh());
    },
  });
};

const sleep = (cb) => {
  setTimeout(() => {
    cb();
  }, 500);
};

const onAudit = async (record: any) => {
  Modal.confirm({
    title: '系统提示',
    centered: true,
    content: `确认审核通过？`,
    onOk: async () => {
      await submitAppAudit({ id: record.id, isAudit: '0' });
      sleep(() => tableRef.value.refresh());
      message.success('审核成功');
    },
  });
};
const onLook = async (record: any) => {
  open({
    title: '详情',
    modalType: 'info',
    defaultValue: { ...record },
    hasEditPermission: false,
    serviceApi: () => Promise.resolve(''),
  });
};

const onDelete = async () => {
  const ids = selectRows.value.map((item) => item.id);
  Modal.confirm({
    title: '系统提示',
    centered: true,
    content: `确认删除当前项？`,
    onOk: async () => {
      await delAppVersion(ids.join());
      sleep(() => tableRef.value.refresh());
      message.success('删除成功');
    },
  });
};
</script>
